<script>
import Calendar from './util.js'
import CalendarItem from './pro-calendar-item.vue'

/**
 * Calendar 日历
 * @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
 * @tutorial https://ext.dcloud.net.cn/plugin?id=56
 * @property {string} date 自定义当前时间，默认为今天
 * @property {boolean} lunar 显示农历
 * @property {string} startDate 日期选择范围-开始日期
 * @property {string} endDate 日期选择范围-结束日期
 * @property {boolean} range 范围选择
 * @property {boolean} insert = [true|false] 插入模式,默认为false
 * 	@value true 弹窗模式
 * 	@value false 插入模式
 * @property {boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
 * @property {Array} selected 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
 * @property {boolean} showMonth 是否选择月份为背景
 * @event {Function} change 日期改变，`insert :ture` 时生效
 * @event {Function} confirm 确认选择`insert :false` 时生效
 * @event {Function} monthSwitch 切换月份时触发
 * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
 */
export default {
  components: {
    CalendarItem,
  },
  props: {
    date: {
      type: String,
      default: '',
    },
    selected: {
      type: Array,
      default() {
        return []
      },
    },
    lunar: {
      type: Boolean,
      default: false,
    },
    startDate: {
      type: String,
      default: '',
    },
    endDate: {
      type: String,
      default: '',
    },
    range: {
      type: Boolean,
      default: false,
    },
    insert: {
      type: Boolean,
      default: true,
    },
    showMonth: {
      type: Boolean,
      default: true,
    },
    clearDate: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['close', 'confirm', 'change', 'monthSwitch'],
  data() {
    return {
      show: false,
      weeks: [],
      calendar: {},
      nowDate: '',
      aniMaskShow: false,
    }
  },
  computed: {
  },
  watch: {
    date(newVal) {
      // this.cale.setDate(newVal)
      this.init(newVal)
    },
    startDate(val) {
      this.cale.resetSatrtDate(val)
      this.cale.setDate(this.nowDate.fullDate)
      this.weeks = this.cale.weeks
    },
    endDate(val) {
      this.cale.resetEndDate(val)
      this.cale.setDate(this.nowDate.fullDate)
      this.weeks = this.cale.weeks
    },
    selected(newVal) {
      this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
      this.weeks = this.cale.weeks
    },
  },
  created() {
    this.cale = new Calendar({
      selected: this.selected,
      startDate: this.startDate,
      endDate: this.endDate,
      range: this.range,
    })
    this.init(this.date)
  },
  methods: {
    // 取消穿透
    clean() {},
    bindDateChange(e) {
      const value = `${e.detail.value}-1`
      this.setDate(value)

      const { year, month } = this.cale.getDate(value)
      this.$emit('monthSwitch', {
        year,
        month,
      })
    },
    /**
     * 初始化日期显示
     * @param {object} date
     */
    init(date) {
      this.cale.setDate(date)
      this.weeks = this.cale.weeks
      this.nowDate = this.calendar = this.cale.getInfo(date)
    },
    /**
     * 打开日历弹窗
     */
    open() {
      // 弹窗模式并且清理数据
      if (this.clearDate && !this.insert) {
        this.cale.cleanMultipleStatus()
        // this.cale.setDate(this.date)
        this.init(this.date)
      }
      this.show = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.aniMaskShow = true
        }, 50)
      })
    },
    /**
     * 关闭日历弹窗
     */
    close() {
      this.aniMaskShow = false
      this.$nextTick(() => {
        setTimeout(() => {
          this.show = false
          this.$emit('close')
        }, 300)
      })
    },
    /**
     * 确认按钮
     */
    confirm() {
      this.setEmit('confirm')
      this.close()
    },
    /**
     * 变化触发
     */
    change() {
      if (!this.insert) {
        return
      }
      this.setEmit('change')
    },
    /**
     * 选择月份触发
     */
    monthSwitch() {
      const {
        year,
        month,
      } = this.nowDate
      this.$emit('monthSwitch', {
        year,
        month: Number(month),
      })
    },
    /**
     * 派发事件
     * @param {object} name
     */
    setEmit(name) {
      const {
        year,
        month,
        date,
        fullDate,
        lunar,
        extraInfo,
      } = this.calendar
      this.$emit(name, {
        range: this.cale.multipleStatus,
        year,
        month,
        date,
        fulldate: fullDate,
        lunar,
        extraInfo: extraInfo || {},
      })
    },
    /**
     * 选择天触发
     * @param {object} weeks
     */
    choiceDate(weeks) {
      if (weeks.disable) {
        return
      }

      this.calendar = weeks
      // 设置多选
      this.cale.setMultiple(this.calendar.fullDate)
      this.weeks = this.cale.weeks
      this.change()
    },
    /**
     * 回到今天
     */
    backToday() {
      const nowYearMonth = `${this.nowDate.year}-${this.nowDate.month}`
      const date = this.cale.getDate(new Date())
      const todayYearMonth = `${date.year}-${date.month}`

      this.init(date.fullDate)

      if (nowYearMonth !== todayYearMonth) {
        this.monthSwitch()
      }

      this.change()
    },
    /**
     * 上个月
     */
    pre() {
      const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
      this.setDate(preDate)
      this.monthSwitch()
    },
    /**
     * 下个月
     */
    next() {
      const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
      this.setDate(nextDate)
      this.monthSwitch()
    },
    /**
     * 设置日期
     * @param {object} date
     */
    setDate(date) {
      this.cale.setDate(date)
      this.weeks = this.cale.weeks
      this.nowDate = this.cale.getInfo(date)
    },
  },
}
</script>

<template>
  <view class="uni-calendar">
    <view v-if="!insert && show" class="uni-calendar__mask" :class="{ 'uni-calendar--mask-show': aniMaskShow }" @click="clean" />
    <view v-if="insert || show" class="uni-calendar__content" :class="{ 'uni-calendar--fixed': !insert, 'uni-calendar--ani-show': aniMaskShow }">
      <view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
        <view class="uni-calendar__header-btn-box" @click="close">
          <text class="uni-calendar__header-text uni-calendar--fixed-width">
            取消
          </text>
        </view>
        <view class="uni-calendar__header-btn-box" @click="confirm">
          <text class="uni-calendar__header-text uni-calendar--fixed-width">
            确定
          </text>
        </view>
      </view>
      <view class="uni-calendar__header">
        <view class="uni-calendar__header-btn-box" @click.stop="pre">
          <view class="uni-calendar__header-btn uni-calendar--left" />
        </view>
        <picker mode="date" :value="date" fields="month" @change="bindDateChange">
          <text class="uni-calendar__header-text">
            {{ `${nowDate.year || ''}年${nowDate.month || ''}月` }}
          </text>
        </picker>
        <view class="uni-calendar__header-btn-box" @click.stop="next">
          <view class="uni-calendar__header-btn uni-calendar--right" />
        </view>
        <text class="uni-calendar__backtoday" @click="backToday">
          今日
        </text>
      </view>
      <view class="uni-calendar__box">
        <view v-if="showMonth" class="uni-calendar__box-bg">
          <text class="uni-calendar__box-bg-text">
            {{ nowDate.month }}
          </text>
        </view>
        <view class="uni-calendar__weeks">
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              日
            </text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              一
            </text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              二
            </text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              三
            </text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              四
            </text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              五
            </text>
          </view>
          <view class="uni-calendar__weeks-day">
            <text class="uni-calendar__weeks-day-text">
              六
            </text>
          </view>
        </view>
        <view v-for="(item, weekIndex) in weeks" :key="weekIndex" class="uni-calendar__weeks">
          <view v-for="(weeks, weeksIndex) in item" :key="weeksIndex" class="uni-calendar__weeks-item">
            <CalendarItem class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
	$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
	$uni-border-color: #EDEDED;
	$uni-text-color: #333;
	$uni-bg-color-hover:#f1f1f1;
	$uni-font-size-base:16px;
	$uni-text-color-placeholder: #808080;
	$uni-color-subtitle: #555555;
	$uni-text-color-grey:#999;
	.uni-calendar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-calendar__mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		/* #ifndef APP-NVUE */
		z-index: 99;
		/* #endif */
	}

	.uni-calendar--mask-show {
		opacity: 1
	}

	.uni-calendar--fixed {
		position: fixed;
		/* #ifdef APP-NVUE */
		bottom: 0;
		/* #endif */
		left: 0;
		right: 0;
		transition-property: transform;
		transition-duration: 0.3s;
		transform: translateY(460px);
		/* #ifndef APP-NVUE */
		bottom: calc(var(--window-bottom));
		z-index: 99;
		/* #endif */
	}

	.uni-calendar--ani-show {
		transform: translateY(0);
	}

	.uni-calendar__content {
		background-color: #fff;
	}

	.uni-calendar__header {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50px;
		border-bottom-color: $uni-border-color;
		border-bottom-style: solid;
		border-bottom-width: 1px;

    font-weight: 500;
	}

	.uni-calendar--fixed-top {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		border-top-color: $uni-border-color;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-calendar--fixed-width {
		width: 50px;
	}

	.uni-calendar__backtoday {
		position: absolute;
		right: 0;
		top: 25rpx;
		padding: 0 5px;
		padding-left: 10px;
		height: 25px;
		line-height: 25px;
		font-size: 14px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		color: $uni-text-color;
		background-color: $uni-bg-color-hover;
	}

	.uni-calendar__header-text {
		text-align: center;
		width: 100px;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}

	.uni-calendar__header-btn-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
	}

	.uni-calendar__header-btn {
		width: 10px;
		height: 10px;
		border-left-color: $uni-text-color-placeholder;
		border-left-style: solid;
		border-left-width: 2px;
		border-top-color: $uni-color-subtitle;
		border-top-style: solid;
		border-top-width: 2px;
	}

	.uni-calendar--left {
		transform: rotate(-45deg);
	}

	.uni-calendar--right {
		transform: rotate(135deg);
	}

	.uni-calendar__weeks {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-calendar__weeks-item {
		flex: 1;
	}

	.uni-calendar__weeks-day {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 45px;
		border-bottom-color: #F5F5F5;
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

	.uni-calendar__weeks-day-text {
		font-size: 16px;
    color: #86909C;

    // font-weight: 500;
	}

	.uni-calendar__box {
		position: relative;
	}

	.uni-calendar__box-bg {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.uni-calendar__box-bg-text {
		font-size: 200px;
		font-weight: bold;
		color: $uni-text-color-grey;
		opacity: 0.1;
		text-align: center;
		/* #ifndef APP-NVUE */
		line-height: 1;
		/* #endif */
	}
</style>
